<template>
    <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" ref="numbox" value="1"   @change="countChanged"/>
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
    <!-- 分析：子组件什么时候把参数传递给父组件 -->
    
</template>
<script>
import mui from '../../lib/mui/js/mui.min.js'
export default {
    mounted(){//初始化数字选择框组件
        mui(".mui-numbox").numbox();
    },
    methods:{
        countChanged(){
            //每当 文本框的数据被修改的时候，立即把最新的数据，通过事件调用传递给父组件
            // console.log(this.$refs.numbox.value);
            var num = parseInt(this.$refs.numbox.value);
            //解决能输入大于总数量的问题
            if(num>this.max){
                num=this.max;
            }
             this.$emit('getcount',num);
            
        }
    },
    props:["max"],
    watch:{//属性监听  当监听到max属性值发生改变时 触发
        "max": function(newVal,oldVal){
            // 使用js API 设置 numbox 的最大值
            mui(".mui-numbox").numbox().setOption('max',newVal);
        }
    }
}
</script>
<style>

</style>
